let content = document.getElementById("content")
let num = document.getElementById("b")
let tip_h = document.getElementsByClassName("tip_h")
let width = content.offsetWidth  
let heigth = content.offsetHeight  

//将随机数封装起来
function fn(a, b) {    
    return Math.floor(Math.random() * (b - a + 1)) + a
}

// function render(){

// }


//请求数据渲染页面
const get = () => ajax({
    url: "http://chst.vip:1902/students/getstulist"
})
get()
    .then(res => {
        // console.log(res.data);
        let html = ""
        let htmlnum = ""
        
        res.data.forEach(res => {
            // console.log(res.id);
            // console.log(res);

            html += `
        
        <div class="tip1" id="cc">
            <div class="tip_h" title="双击关闭纸条">
                <div class="num">${res.time}</div>
                <div class="close" title="关闭纸条">×</div>
                <div class="clr"></div>
            </div>
            <div class="tip_c">
                ${res.content}
            </div>
            <div class="tip_f">
                <div class="icon">
                    <img src="images/bpic_1.gif" alt="" title="">
                </div>
                <div class="name">${res.name}</div>
                <div class="clr"></div>
            </div>
        </div>
    
        `

        })
        htmlnum += `
    评论:${res.data.length}
    `
        content.innerHTML = html
        num.innerHTML = htmlnum

        let lis = content.children
        for (let i = 0; i < lis.length; i++) {  //随机生成的位移
            lis[i].style.position = "absolute"
            lis[i].style.left = fn(0, width - lis[i].offsetWidth) + "px"
            lis[i].style.top = fn(0, heigth - lis[i].offsetHeight) + "px"


            //鼠标按下事件
            let zIndex=0  //初始层级
            tip_h[i].onmousedown = function (e) {
                zIndex ++ //点进去一次++
                lis[i].style.zIndex = zIndex  //提升层级

                let moveX = e.clientX - content.offsetLeft - lis[i].offsetLeft;
                // console.log(moveX); //鼠标每次在content内部点击鼠标的X轴坐标
                let moveY = e.clientY - content.offsetTop - lis[i].offsetTop;
                // console.log(moveY);//鼠标每次在content内部点击鼠标Y轴的坐标
                content.onmousemove = function (e) {  //鼠标移动事件
                    //限定移动区域
                    let left = e.clientX - moveX - content.offsetLeft
                    // console.log(e.clientX);
                    // console.log(moveX);
                    // console.log(left);
                    // clientX鼠标离左窗口的距离
                    //move鼠标每次在content内部点击鼠标的X轴坐标
                    // console.log(left);
                    let top = e.clientY - moveY
                    // console.log(top);

                    if(left<= 0){
                        left = 0
                    }else if(left >= content.offsetWidth-lis[i].offsetWidth){
                        left = content.offsetWidth-lis[i].offsetWidth
                    }
                    if(top <= 0){
                        top = 0
                    }else if(top >= content.offsetHeight-lis[i].offsetHeight){
                        top = content.offsetHeight-lis[i].offsetHeight
                    }

                    lis[i].style.left = left+ 'px'
                    lis[i].style.top = top+ 'px'
                }
            }

            //鼠标松开事件
            document.onmouseup = function () {
                content.onmousemove = null
                
            }
            let close = document.getElementsByClassName("close")

            //删除事件
            close[i].onclick = () => {
               

                let del=confirm(`确定要删除${res.data[i].name}的评论吗`)
                let id = res.data[i].id
                
                if(!del){
                    alert("已取消此操作")
 
                 }else{
                    lis[i].remove()  //移出自己本身
                     remove(id)
                 }
               
            }

            //双击删除事件

            // console.log(tip_h);
            tip_h[i].ondblclick = () => {
                console.log(tip_h[i].parentNode);
                
                let del=confirm(`确定要删除${res.data[i].name}的评论吗`)
                // tip_h[i].removeChild(parentNode)//fcds
                // tip_h[i].removeChild(tip_h[i].parentNode)
                // console.log(111);
                let id = res.data[i].id
                if(!del){
                    alert("已取消此操作")
 
                 }else{
                     console.log(1111111);
                     lis[i].remove()  //移出自己本身
               
                    console.log(111);
                    remove(id)
                 }
               
            }
        }
    })

// } render()

let addtext = document.getElementById("input")
let submit = document.getElementById("submit")
submit.style.background = "grey"
submit.disable = true

//增加评论

addtext.oninput = () => {   //文本框输入事件
   
    if (addtext.value == "") {
        submit.disable = true
        submit.style.background = "grey"
    } else {
        submit.disable = false
        submit.style.background = "red"
    }
     //点击按钮添加调用函数
    submit.onclick = () => { 
        commentAdd()

    }
    //按键盘增加评论
    window.onkeydown = (e) => {  
        // console.log(e);
        if (e.key === "Enter") {
            e.preventDefault()
            commentAdd()
            }
    }
}



//添加评论的函数
function commentAdd(){  
    let name = prompt("请输入你的昵称")
    if (name === "") {
        alert('未输入你的昵称')
        return
    }
    add(name, addtext.value)
    alert("评论添加成功")
    location.reload()
    // render()
}


function remove(id) {  // 删除数据函数
    ajax({
        url: "http://chst.vip:1902/students/del",
        data: {
            id: id
        }
    })
        .then(res => {
            // console.log(res.state);
            if(res.state==false){
            alert("此数据不存在")
            location.reload()
            return
             }
             alert("您已删除成功")
             location.reload()
            console.log(res);
        })
}
function add(name, content) {//增加数据函数
    ajax({
        url: "http://chst.vip:1902/students/addlist",
        method: "post",
        data: {
            name: name,
            content: content
        }
    })
       
}


